<template>
  <component :is="useRoute && !isCenterButton ? 'RouterLink' : 'div'"
    :to="useRoute && !isCenterButton ? { name } : undefined" class="Tabbar_item" @click="handleClick">
    <template v-if="isCenterButton">
      <slot />
    </template>
    <template v-else>
      <Icon v-if="hasIcon" :name="icon" :size="size" :color="isActive ? activeColor : defaultColor" />
      <span :style="{ color: isActive ? activeColor : defaultColor }">
        <slot />
      </span>
    </template>
  </component>
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue';
const Icon = defineAsyncComponent(() => import('@/components/Common/Icon/index.vue'));


const props = defineProps({
  icon: { type: String, default: '' },
  size: { type: Number, default: 20 },
  name: { type: String, default: '' },
  index: Number,
  isActive: Boolean,
  defaultColor: String,
  activeColor: String,
  useRoute: Boolean,
  onItemSelect: Function,
  isCenterButton: { type: Boolean, default: false }
});

// 只有非中心按钮才触发选择事件
const handleClick = () => {
  if (!props.isCenterButton) {
    props.onItemSelect?.();
  }
};

const hasIcon = computed(() => !!props.icon?.trim());
</script>

<style lang="scss">
.Tabbar_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: inherit;

  &.router-link-active {
    span {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 2px;
        background-color: v-bind('activeColor');
      }
    }
  }

  // ✅ 关键：如果 isCenterButton，则隐藏下划线
  &.is-center-button {
    span::after {
      display: none !important;
    }
  }

  .add-btn {
    font-weight: 600;
    color: #000;
    padding: 10px 14px;
    border-radius: 5px;
    background: #fff;
  }
}
</style>